<script>
export default {
  name: 'MessageView',
  data() {
    return {
      activeName: 1,


    }
  },
  methods: {
    goToOnlineConsultation() {
      //聊天列表
      this.$router.push({ name: 'Consultation' });
    },
    goToServiceMessage() {
      //服务消息
      this.$router.push({ name: 'ServiceMessages' });
    },
    goToSystemMessage() {
      //系统消息
      this.$router.push({ name: 'SystemMessages' });
    },
    tiaozhuan(activeName) {
      switch (activeName) {
        case 0:
          this.$router.push({ name: 'index' });
          break;
        case 2:
          this.$router.push({ name: 'my' });
          break;
        default:
          break;
      }
    }
  }
}

</script>

<template>
  <div class="message-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>消息</h1>
    </div>

    <!-- 在线咨询 -->
    <div class="message-block" @click="goToOnlineConsultation">
      <div class="message-icon">
        <svg class="MessageIcon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
          <path d="M919.168 976.832a42.56 42.56 0 0 1-21.888-6.08l-185.088-110.72c-64 24.192-131.84 36.48-200.192 36.224-274.688 0-498.176-192.96-498.176-430.208C13.824 228.864 237.312 35.84 512 35.84s498.176 193.024 498.176 430.208c0 104.64-42.944 203.648-121.664 281.856l70.4 168.64c7.168 17.28 2.56 37.248-11.392 49.6a42.688 42.688 0 0 1-28.352 10.688z m-203.264-208.448c7.68 0 15.232 2.048 21.952 6.08l91.072 54.4-31.488-75.392a43.712 43.712 0 0 1 11.648-49.792c74.176-64.384 115.008-148.736 115.008-237.632 0-189.312-184.896-343.36-412.096-343.36-227.2 0-412.096 154.048-412.096 343.36S284.8 809.408 512 809.408a473.792 473.792 0 0 0 187.136-37.568 42.624 42.624 0 0 1 16.768-3.456z m-454.976-298.24a56.32 56.32 0 0 1 56.32-56 56.32 56.32 0 0 1 55.872 56.576 56.32 56.32 0 0 1-55.808 56.576 56.32 56.32 0 0 1-56.32-56v-1.088z m186.496 0c0 32 25.728 57.92 57.408 57.92a57.6 57.6 0 0 0 57.344-57.92 57.6 57.6 0 0 0-57.344-57.856 57.6 57.6 0 0 0-57.408 57.856z m186.496 0a56.32 56.32 0 0 1 56.32-56 56.32 56.32 0 0 1 55.872 56.576 56.32 56.32 0 0 1-55.808 56.576 56.32 56.32 0 0 1-56.32-56v-1.152z" fill="#3370FF" p-id="8690"></path>
        </svg>
      </div>
      <div class="message-content">
        <div class="message-title">在线咨询</div>
        <div class="message-description">查看和医生的聊天消息</div>
      </div>
      <div class="message-arrow"></div>
    </div>

    <!-- 服务消息 -->
    <div class="message-block" @click="goToServiceMessage">
      <div class="message-icon">
        <svg class="MessageIcon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
          <path d="M512 128a320 320 0 0 1 320 320v320h-64V448a256 256 0 1 0-512 0v320H192V448a320 320 0 0 1 320-320z" fill="#6893DF" p-id="15676"></path><path d="M128 768m32 0l704 0q32 0 32 32l0 0q0 32-32 32l-704 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#6893DF" p-id="15677"></path><path d="M512.256 64a32 32 0 0 1 32 32v64a32 32 0 0 1-64 0v-64a32 32 0 0 1 32-32zM512 960a128 128 0 0 0 127.68-118.4L640 832H576l-0.448 7.488A64 64 0 0 1 448 832H384a128 128 0 0 0 128 128z" fill="#6893DF" p-id="15678"></path>
        </svg>
      </div>
      <div class="message-content">
        <div class="message-title">服务消息</div>
        <div class="message-description">签约与服务相关提醒</div>
      </div>
      <div class="message-arrow"></div>
    </div>

    <!-- 系统消息 -->
    <div class="message-block" @click="goToSystemMessage">
      <div class="message-icon">
        <svg class="MessageIcon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
          <path d="M841.638649 555.271526c1.775436-14.201443 3.106758-28.625968 3.106758-43.271526 0-14.645558-1.331321-29.069059-3.106758-43.271526l93.865831-73.449849c8.432043-6.656607 10.873652-18.639522 5.325285-28.40391l-88.76158-153.779386c-5.547343-9.54233-17.087167-13.536294-27.072589-9.54233l-110.508883 44.602847c-22.856567-17.530258-47.931662-32.397874-75.003228-43.715641L622.841457 86.830601c-1.997494-10.429537-11.095709-18.639522-22.190395-18.639522l-177.523159 0c-11.095709 0-20.192901 8.209986-21.968337 18.639522l-16.643052 117.609605c-27.072589 11.316743-52.147684 25.962302-75.003228 43.715641l-110.50786-44.602847c-9.985422-3.771907-21.524223 0-27.072589 9.54233l-88.76158 153.779386c-5.547343 9.54233-3.106758 21.524223 5.325285 28.40391l93.643774 73.449849c-1.775436 14.201443-3.106758 28.625968-3.106758 43.271526 0 14.645558 1.331321 29.069059 3.106758 43.271526l-93.643774 73.449849c-8.432043 6.656607-10.873652 18.639522-5.325285 28.40391l88.76158 153.779386c5.547343 9.54233 17.086144 13.536294 27.072589 9.54233l110.508883-44.602847c22.856567 17.530258 47.931662 32.397874 75.003228 43.715641l16.643052 117.609605c1.775436 10.429537 10.873652 18.639522 21.968337 18.639522l177.523159 0c11.095709 0 20.192901-8.209986 21.968337-18.639522l16.643052-117.609605c27.072589-11.316743 52.147684-25.962302 75.003228-43.715641l110.50786 44.602847c9.985422 3.771907 21.525246 0 27.072589-9.54233l88.76158-153.779386c5.547343-9.54233 3.106758-21.524223-5.325285-28.40391L841.638649 555.271526zM511.88846 667.332764c-85.876879 0-155.332764-69.455885-155.332764-155.332764s69.455885-155.332764 155.332764-155.332764c85.876879 0 155.332764 69.455885 155.332764 155.332764S597.765339 667.332764 511.88846 667.332764z" p-id="16818"></path>
        </svg>
      </div>
      <div class="message-content">
        <div class="message-title">系统消息</div>
        <div class="message-description">系统消息提醒</div>
      </div>
      <div class="message-arrow"></div>
    </div>

    <!-- 底部导航 -->
    <van-tabbar v-model="activeName" class="custom-tabbar">
      <van-tabbar-item icon="wap-home-o" @click="tiaozhuan(0)">首页</van-tabbar-item>
      <van-tabbar-item icon="comment" @click="tiaozhuan(1)">消息</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="tiaozhuan(2)">我的</van-tabbar-item>
    </van-tabbar>


  </div>
</template>

<style scoped>
@import "../message/Message.css";
</style>